<template>
  <div class="container">
    <div class="title">
      <span v-if="serveParams.serveId">
        {{formData.device_code}}
      </span>
      <span v-else> 运维服务和资金需求信息</span>
    </div>
    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <el-alert title="金额单位一律为万元，保留4位小数" type="error" effect="light" :closable="false" show-icon></el-alert>
      </el-col>
      <el-col :span="12" :offset="0">
        <template
          v-if="!formData.service_pre_amount && formData.service_pre_amount!=0 && formData.third_check_amount >= 0">
          <el-alert type="warning" effect="light" :closable="false" show-icon>
            <template slot='title'>
              <div>往年审核金额为:
                <span style="font-size:20px">{{formData.third_check_amount}}</span> 万元
              </div>
            </template>
          </el-alert>
        </template>
      </el-col>
    </el-row>

    <el-form :model="formData" ref="form" :rules="rules" :inline="false" size="normal" label-position="top"
      v-loading="loading">
      <el-row :gutter="20">
        <el-col :span="8" :offset="0">
          <el-form-item label="数量" prop="device_num">
            <el-input-number v-model="formData.device_num" :min="0" :step="1" :precision="0" class="wid">
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="服务分类" prop="service_type">
            <el-cascader v-model="formData.service_type" :options="d_serveType" class="wid">
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0" v-if="otherShow">
          <el-form-item label="其它类型" prop="other">
            <el-input v-model="formData.other"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8" :offset="0">
          <el-form-item label="运维资金预算">
            <el-input v-model="isAmount" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="总运维资金预算" prop="service_pre_amount">
            <el-input-number v-model="formData.service_pre_amount" :min="0" :step="1" :precision="4" class="wid">
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="采购方式" prop="buy_type">
            <el-select v-model="formData.buy_type" value-key="buy_type" placeholder="采购方式" class="wid">
              <el-option v-for="item in d_buyType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8" :offset="0" v-if="formData.buy_type== 1">
          <el-form-item label="" prop="only_source_file">
            <up-load titleName="单一来源附件" :size="50" :require="true" v-model="formData.only_source_file"></up-load>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24" :offset="0">
          <el-form-item label="服务内容" prop="service_content">
            <el-input v-model="formData.service_content" type="textarea" :rows="6"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="title">本次申报运维时间</div>
      <el-row :gutter="20">
        <el-col :span="8" :offset="0">
          <el-form-item label="运维开始时间" prop="serve_start_date">
            <el-date-picker v-model="formData.serve_start_date" type="date" value-format="yyyy-MM-dd"
              placeholder="运维开始时间" :clearable="true" class="wid">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="运维结束时间" prop="serve_end_date">
            <el-date-picker v-model="formData.serve_end_date" type="date" value-format="yyyy-MM-dd" placeholder="运维结束时间"
              :clearable="true" class="wid">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="title">指标项</div>
      <div v-for="(item, index) in formData.items" :key="index">
        <el-card v-if="item.del_flag==='0'" shadow="always" :body-style="{ padding: '10px 20px' }">
          <el-row :gutter="20">
            <el-button-group>
              <el-button type="primary" size="medium">第 {{item.num}} 条</el-button>
              <el-button type="danger" size="medium" @click="removeTarget(index)">删除</el-button>
            </el-button-group>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="0" :offset="0">
              <el-input v-model="item.sub_id"></el-input>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="指标项" :prop="`items[${index}].target_index`" :rules="rules.target_index">
                <el-input v-model="item.target_index" :placeholder="eg1" type="textarea" :rows="6"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="指标描述" :prop="`items[${index}].target_desc`" :rules="rules.target_desc">
                <el-input v-model="item.target_desc" :placeholder="eg2" type="textarea" :rows="6"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="指标要求" :prop="`items[${index}].target_require`" :rules="rules.target_require">
                <el-input v-model="item.target_require" :placeholder="eg3" type="textarea" :rows="6"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="服务时间" :prop="`items[${index}].service_time`" :rules="rules.service_time">
                <el-input v-model="item.service_time" placeholder="例：5*8" type="textarea" :rows="2"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="服务方式" :prop="`items[${index}].service_method`" :rules="rules.service_method">
                <el-select v-model="item.service_method" value-key="service_method" placeholder="服务方式" class="wid">
                  <el-option v-for="item in d_targetType" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="交付成果" :prop="`items[${index}].service_result`" :rules="rules.service_result">
                <el-input v-model="item.service_result" placeholder="巡检文档" type="textarea" :rows="2"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </div>
      <div class="center" style="margin-top:20px">
        <el-button type="primary" size="default" @click="addTarget">添加新指标</el-button>
        <el-button type="danger" size="default" @click="deviceCancel" :loading="saveLoading">取消</el-button>
        <template v-if="this.switch && this.copyStatus!='0'">
          <el-button type="primary" size="default" @click="deviceEdit" :loading="saveLoading"
            v-if="serveParams.serveId">保存</el-button>
          <el-button type="primary" size="default" @click="deviceAdd" :loading="saveLoading" v-else>添加</el-button>
        </template>
      </div>
    </el-form>
  </div>
</template>
<script>
import UpLoad from '../Upload'
import { d_serveType, d_buyType, d_targetType } from '@/utils/dicts.js'
export default {
  name: 'Serve',
  components: {
    UpLoad
  },
  props: {
    switch: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    serveParams: {
      type: Object,
      default: () => {
        return {
          items: [
            {
              index: 1,
              num: 1,
              del_flag: '0'
            }
          ]
        }
      }
    },
    copyStatus: {
      type: String,
      default: () => {
        return '3'
      }
    },
  },
  data () {
    return {
      loading: false,
      saveLoading: false,
      formData: {
        device_num: '1',
        purchase_price: '0',
        service_pre_amount: '0',
        items: [
          {
            index: 1,
            num: 1,
            del_flag: '0'
          }
        ]
      },
      rules: {
        device_num: [
          { required: true, validator: this.$util.isNum, trigger: 'change' },
        ],
        service_type: [
          { required: true, message: '请选择服务分类', trigger: 'change' },
        ],
        other: [
          { required: true, message: '请输入其它类型', trigger: 'blur' },
        ],
        service_pre_amount: [
          { required: true, validator: this.$util.isFloat, trigger: 'change' },
        ],
        buy_type: [
          { required: true, message: '请选择采购方式', trigger: 'change' },
        ],
        only_source_file: [
          { required: true, message: '请选择单一来源附件', trigger: 'change' },
        ],
        service_content: [
          { required: true, message: '请输入服务内容', trigger: 'blur' },
        ],
        serve_start_date: [
          { required: true, message: '请选择运维开始时间', trigger: 'change' },
        ],
        serve_end_date: [
          { required: true, message: '请选择运维结束时间', trigger: 'change' },
        ],
        target_index: [
          { required: true, message: '请输入指标项', trigger: 'blur' }
        ],
        target_desc: [
          { required: true, message: '请输入指标描述', trigger: 'blur' }
        ],
        target_require: [
          { required: true, message: '请输入指标要求', trigger: 'blur' }
        ],
        service_time: [
          { required: true, message: '请输入服务时间', trigger: 'blur' }
        ],
        service_method: [
          { required: true, message: '请选择服务方式', trigger: 'change' }
        ],
        service_result: [
          { required: true, message: '请输入交付成果', trigger: 'blur' }
        ]
      },
      d_serveType: d_serveType,
      d_buyType: d_buyType,
      d_targetType: d_targetType,
      eg1: '例1：例行巡检\n' + '例2：系统可用性\n' + '例3：故障响应时间\n' + '例4：故障处理时间\n',
      eg2: '例1：工作日早8点半前和下班5点前，完成巡检工作\n' + '例2：提供对中心机房强电系统的技术支持保障，设备常规维护等。保障强电系统稳定运行\n' + '例3：接到故障报警后的响应时间\n' + '例4：故障处理时间\n',
      eg3: '例1：每天2次\n' + '例2：100%\n' + '例3：5分钟\n',
    }
  },
  created () {

  },
  mounted () {
    if (this.serveParams.serveId) {
      this.init()
    }
  },
  methods: {
    async init () {
      this.loading = true
      const res = await this.$http('inputItObj', {
        id: this.serveParams.serveId
      })
      this.formData = res
      this.formData.service_type = JSON.parse(this.formData.service_type)
      this.formData.items.forEach((item, index) => {
        item.num = index + 1
        item.del_flag = '0'
      })
      this.loading = false
    },
    deviceCancel () {
      this.$emit('cancel')
    },
    async deviceAdd () {
      if (!this.check()) {
        return false
      }
      this.saveLoading = true
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          this.formData.service_type = JSON.stringify(this.formData.service_type)
          // 新复制资产情况审核金额
          if (this.formData.update_date == this.formData.create_date) {
            this.formData.third_check_amount = '0'
          }
          const res = await this.$http('inputItAdd', {
            contract_id: this.serveParams.cid,
            del_flag: '0',
            ...this.formData,
          })
          this.$tips.success(res.errmsg)
          this.saveLoading = false
          this.$emit('cancel')
          this.$emit('init')
        } else {
          this.$tips.error('请检查必填项')
          this.saveLoading = false
          return false;
        }
      })
    },
    async deviceEdit () {
      if (!this.check()) {
        return
      }
      this.saveLoading = true
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          this.formData.service_type = JSON.stringify(this.formData.service_type)
          // 新复制资产情况审核金额
          if (this.formData.update_date == this.formData.create_date) {
            this.formData.third_check_amount = '0'
          }
          const res = await this.$http('inputItUp', {
            ...this.formData,
          })
          this.$tips.success(res.errmsg)
          this.saveLoading = false
          this.$emit('cancel')
          this.$emit('init')
        } else {
          this.$tips.error('请检查必填项')
          this.saveLoading = false
          return false;
        }
      });
    },
    check () {
      if (this.formData.serve_start_date >= this.formData.serve_end_date) {
        this.$tips.error('运维结束时间应大于运维开始时间')
        return false
      }
      let check_arr = [...this.formData.items]
      check_arr = check_arr.filter(item => {
        return item.del_flag === '0'
      })
      if (check_arr.length < 1) {
        this.$tips.error('请填写至少一条指标项并补全字段')
        return false
      }
      return true
    },
    addTarget () {
      let index = this.formData.items.length
      this.formData.items.push({
        del_flag: '0',
        index: index + 1
      })
      let num = 1
      this.formData.items.forEach((item, index) => {
        if (item.del_flag === '0') {
          item.num = num
          num++
        }
      })
    },
    removeTarget (index) {
      this.formData.items[index].del_flag = '1'
      let num = 1
      this.formData.items.forEach((item, index) => {
        item.index = index + 1
        if (item.del_flag === '0') {
          item.num = num
          num++
        }
      })
    }
  },
  computed: {
    isAmount () {
      return (this.formData.service_pre_amount / this.formData.device_num).toFixed(4)
    },
    otherShow () {
      let arr = this.formData.service_type
      let other = '328,354,360'
      if (arr) {
        let type = arr[arr.length - 1]
        if (other.indexOf(type) > -1) {
          return true
        } else {
          return false
        }
      }
    }
  },
  watch: {
  }
}
</script>
<style lang='scss' scoped>
</style>
